<template>
  <div class="contentTable" v-loading="loading">
    <div class="jobFilterList">
      <div
        class="jobFilterItem"
        :class="{
          jobFilterItem: true,
          active: jobFilterDisplayData[item.prop].length > 0
        }"
        v-for="(item, index) in jobFilterList"
        :key="index"
      >
        <el-tooltip
          placement="bottom"
          effect="light"
          v-if="item.options.length"
          popper-class="filterTooltipsContainer"
        >
          <div slot="content">
            <div class="jobFilterItemTooltipsContent tooltipsContent">
              <el-checkbox-group
                :class="[
                  'jobFilterItemTooltipCheckboxGroup',
                  'TooltipsRegionCheckboxGroup',
                  'optionsBox',
                  item.prop
                ]"
                v-model="jobFilterDisplayData[item.prop]"
                @change="(e) => handleFilterCheckboxChange(e, item.prop)"
              >
                <el-checkbox
                  :label="_item.value"
                  v-for="(_item, _index) in item.options"
                  :key="_index"
                  >{{ _item.label }}</el-checkbox
                >
              </el-checkbox-group>
            </div>
          </div>
          <div class="jobFilterItemLabel">
            <span>{{
              jobFilterDisplayData[item.prop].length > 0
                ? `${item.label}(${jobFilterDisplayData[item.prop].length})`
                : item.label
            }}</span>
            <i class="el-icon-arrow-down arrow"></i>
          </div>
        </el-tooltip>
      </div>
    </div>
    <div class="positionList-box" v-if="positionList.length">
      <template v-if="comId">
        <div
          v-for="(item, index) in positionList"
          :key="index"
          class="item"
          @click="toJobDetail(item, false)"
        >
          <div class="item-info">
            <div class="item-info-text">
              <div class="item-info-text-left">
                <div class="item-info-text-left-name">
                  {{ item.positionName || '' }}
                </div>
                <div class="item-info-text-left-salary">
                  <div class="salary">
                    {{ formatSalary(item.salaryDown, item.salaryUp) }}
                  </div>
                  <div class="command-box">
                    <span class="command line" v-if="item.region">{{
                      item.region
                    }}</span>
                    <span class="command line" v-if="item.eduName">{{
                      item.eduName
                    }}</span>
                    <span class="command" v-if="item.workExp">{{
                      item.workExp
                    }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="item-contact">
            <div class="item-contact-info" v-if="item.personJobInfo">
              <img class="avatar" :src="item.personJobInfo.pic" />
              <span class="text">{{ item.personJobInfo.iname }} · </span>
              <span class="text">{{ item.personJobInfo.pnames }}</span>
            </div>
          </div>
        </div>
      </template>
      <template v-if="companyId">
        <div
          v-for="(item, index) in positionList"
          :key="index"
          class="item"
          @click="toJobDetail(item, true)"
        >
          <div class="item-info">
            <div class="item-info-text">
              <div class="item-info-text-left">
                <div class="item-info-text-left-name">
                  {{ item.jtzw || '' }}
                </div>
                <div class="item-info-text-left-salary">
                  <div class="salary">{{ item.xzdy_new }}</div>
                  <div class="command-box">
                    <span class="command line" v-if="item.regionname">{{
                      item.regionname
                    }}</span>
                    <span class="command line" v-if="item.edus">{{
                      item.edus
                    }}</span>
                    <span class="command" v-if="item.gznum">{{
                      item.gznum
                    }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="item-contact">
            <div class="item-contact-info" v-if="item.personJobInfo">
              <img class="avatar" :src="item.personJobInfo.pic" />
              <span class="text">{{ item.personJobInfo.iname }} · </span>
              <span class="text">{{ item.personJobInfo.pnames }}</span>
            </div>
          </div>
        </div>
      </template>
    </div>
    <el-empty class="empty" description="暂无数据" v-else></el-empty>
    <div class="pager" v-show="pData.total > 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pData.currentPage"
        :page-sizes="pData.pageSizes"
        :page-size="pData.pageSize"
        :layout="pData.layout"
        :total="pData.total"
        background
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {
  getCompanyCareerJobs,
  getCompanyJobs,
  getRecruit
} from '@/api/job-detail';
import avatar from '@/assets/images/png/avatar_default.png';
import pagination from '@/mixin/pagination';
import { expList, eduList } from '@/utils/jobFilterData.js';
export default {
  name: 'careerTable',
  mixins: [pagination],
  components: {},
  data() {
    return {
      avatar,
      positionList: [],
      loading: false,
      pData: {
        currentPage: 1,
        pageSizes: [10, 20, 30, 50],
        pageSize: 30,
        total: 0,
        layout: 'total, prev, pager, next, sizes, jumper'
      },
      jobFilterData: {
        regionid: [],
        eduId: [],
        gznum: []
      },
      jobFilterDisplayData: {
        regionid: [],
        eduId: [],
        gznum: []
      },
      jobFilterList: [
        { label: '工作经验', options: expList, prop: 'gznum' },
        { label: '学历要求', options: eduList, prop: 'eduId' }
      ],
      comId: '',
      companyId: '',
      regionList: []
    };
  },
  created() {
    this.comId = this.$route.query.comId;
    this.companyId = this.$route.query.companyId;
    this.getData();
    this.getRecruitFn();
  },
  methods: {
    async getRecruitFn() {
      // this.recruitLoading = true; // TODO:
      // 这两个参数不会同时都有值。
      // comId: 职业详情中的职业机会列表 => 岗位详情 => 这里
      // companyId: 校招岗位列表 => 岗位详情 => 这里
      const params = {
        companyId: this.companyId,
        id: this.comId
      };
      const res = await getRecruit(params);
      if (res.code === 200) {
        if (res.data.regionList && res.data.regionList.length) {
          let regionMap = {};
          res.data.regionList.forEach((item) => {
            if (!regionMap[item.value]) {
              this.regionList.push(item);
              regionMap[item.value] = true;
            } else {
              regionMap[item.value] = true;
            }
          });
          console.log(this.regionList, '-=======');
          this.jobFilterList.unshift({
            label: '工作城市',
            options: this.regionList,
            prop: 'regionid'
          });
        }
      }
    },
    formatSalary(down, up) {
      if (down && up) {
        return (
          Math.floor(down / 1000) + '-' + Math.floor(up / 1000) + 'k' + '/月'
        );
      } else {
        return '面议';
      }
    },
    handleFilterCheckboxChange(value, prop) {
      this.pData.currentPage = 1;
      this.jobFilterData[prop] = [];
      this.jobFilterDisplayData[prop] = [];
      if (value && value.length) {
        this.jobFilterData[prop][0] = value[value.length - 1];
        this.jobFilterDisplayData[prop][0] = value[value.length - 1];
      }
      this.getData();
    },
    toJobDetail(item, flag) {
      let path;
      if (!flag) {
        const jobDetail = {
          employerRequirements: item.positionDemand,
          cname: item.comName,
          trade: item.industry,
          yuangong: item.comScale,
          jtzw: item.positionName,
          regionid_name: item.region,
          edus: item.eduName,
          rctypes: item.workExp,
          xzdy: `${item.salaryDown}-${item.salaryUp}元/月`,
          id: item.ylPositionId,
          activeTime: item.publishTime
        };
        localStorage.setItem('jobDetail', JSON.stringify(jobDetail));
        path = `/job-detail?comId=${item.comId}&isShowQRCode=false`;
      } else {
        path = `/job-detail?companyId=${this.companyId}&zp_id=${item.id}`;
      }
      let routeData = this.$router.resolve({ path });
      window.open(routeData.href, '_blank');
    },
    getData() {
      this.loading = true;
      // 分两种情况
      // comId: 职业详情中的职业机会列表 => 岗位详情 => 这里
      // companyId: 校招岗位列表 => 岗位详情 => 这里
      const params = {
        pageNo: this.pData.currentPage,
        pageSize: this.pData.pageSize,
        gznum: this.jobFilterData.gznum[0],
        eduId: this.jobFilterData.eduId[0],
        regionid: this.jobFilterData.regionid[0]
      };
      if (this.comId) {
        params.id = this.comId;
      } else {
        params.companyId = this.companyId;
        params.rctypes = params.gznum == '-1||0' ? '0' : '';
      }
      const fn = this.comId ? getCompanyCareerJobs : getCompanyJobs;
      fn(params)
        .then((res) => {
          if (res.code == 200) {
            this.positionList = res.data;
            this.pData.total = +res.pageparam.sums || 0;
          } else {
            this.$message.error(res.status_desc);
          }
        })
        .catch((e) => {
          console.log(e);
        })
        .finally(() => {
          this.loading = false;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.tooltipsContent {
  // max-width: 373px;
  padding: 0 10px;
  .TooltipsRegionCheckboxGroup {
    ::v-deep .el-checkbox {
      min-width: auto;
      margin: 4px 0;
      margin-right: 14px;
    }
  }
  .gznum {
    width: 320px;
  }
  .eduId {
    width: 220px;
  }
  .regionid {
    max-width: 660px;
  }
}
.filterTooltipsContainer {
  width: 700px !important;
}
.contentTable {
  flex: 1;
  padding: 12px 24px 0 24px;
  .jobFilterList {
    display: flex;
    margin-bottom: 24px;
    .jobFilterItem {
      background: #eff5ff;
      border-radius: 4px;
      padding: 5px 8px;
      margin-right: 24px;
      border: 1px solid #e5eef9;
      cursor: pointer;
      .jobFilterItemLabel {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #555555;
        text-align: left;
        font-style: normal;
        display: flex;
        align-items: center;
        .arrow {
          color: #bbbbbb;
          margin-left: 8px;
        }
      }
      &.active {
        background: #cadfff;
        .jobFilterItemLabel {
          color: #0b6eff;
          .arrow {
            color: #0b6eff;
          }
        }
      }
    }
  }
  ::v-deep .el-tooltip__popper.is-light {
    width: 200px;
  }
  .positionList-box {
    display: grid;
    gap: 10px;
    .item {
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #e4e5e7;
      cursor: pointer;
      .command-box {
        display: flex;
        align-items: center;
        .command {
          font-family: PingFangSC, PingFang SC;
          font-size: 13px;
          color: #a2a5b3;
          padding: 0 11px;
          &:last-child {
            padding-right: 0;
          }
        }
        .line {
          position: relative;
          &:after {
            content: '';
            position: absolute;
            top: 50%;
            right: 0;
            width: 1px;
            height: 11px;
            background: #e5e6eb;
            transform: translateY(-50%);
          }
        }
      }
      &-info {
        display: flex;
        padding: 16px 14px;
        &-text {
          flex: 1;
          display: flex;

          &-left {
            width: 340px;
            cursor: pointer;
            &-name {
              font-weight: bold;
              font-size: 16px;
              color: #222222;
              margin-bottom: 18px;
            }
            &-salary {
              display: flex;
              .salary {
                font-weight: bold;
                font-size: 16px;
                color: #d5413d;
                margin-right: 14px;
              }
            }
          }
        }
      }
      &-contact {
        display: flex;
        align-items: center;
        padding: 11px 16px;
        background: linear-gradient(
          276deg,
          rgba(218, 240, 247, 0.1) 0%,
          rgba(230, 240, 255, 0.3) 100%
        );
        &-info {
          display: flex;
          align-items: center;
          flex-grow: 0;
          .avatar {
            width: 25px;
            height: 25px;
            border: 2px solid #ffffff;
            border-radius: 50%;
            margin-right: 8px;
          }
        }
        .text {
          font-family: PingFangSC, PingFang SC;
          font-size: 14px;
          color: #9cabb7;
        }
      }
    }
  }
  .pager {
    display: flex;
    justify-content: center;
    margin-top: 24px;
  }

  ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #0b6eff;
  }

  @media (min-width: 576px) {
    .positionList-box {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 995px) {
    .positionList-box {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (min-width: 1300px) {
    .positionList-box {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (min-width: 1800px) {
    .positionList-box {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  @media (min-width: 2200px) {
    .positionList-box {
      grid-template-columns: repeat(5, 1fr);
    }
  }
}
</style>
